﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Date Countdown jQuery Plugin</title>
    <script src="script/jquery-1.6.1.js" type="text/javascript"></script>
    <script src="script/jquery.jcountdown1.3.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            /*	
            清除计时器：
            clearInterval( timer );
            $(this).trigger('complete');
            */

            //日期往前走
            $("#time").countdown({
                date: "2011/11/23 00:00:00", //Counting TO a date
                //htmlTemplate: "%{h} <span class=\"cd-time\">hours</span> %{m} <span class=\"cd-time\">mins</span> %{s} <span class=\"cd-time\">sec</span>",
                //date: "july 1, 2011 19:24", //Counting TO a date
                onChange: function (event, timer) {

                },
                onComplete: function (event) {
                    $(this).html("Completed");
                },
                leadingZero: true,
                direction: "up"
            });

            //日期倒计时
            $("#time2").countdown({
                date: "2013/9/22 13:30:17",
                htmlTemplate: "%{h} <span class=\"cd-time\">小时</span> %{m} <span class=\"cd-time\">分钟</span> %{s} <span class=\"cd-time\">秒</span>",
                onChange: function (event, timer) {

                },
                onComplete: function (event) {
                    $(this).html("Completed");
                },
                onPause: function (event, timer) {
                    $(this).html("Pause");
                },
                onResume: function (event) {
                    $(this).html("Resumed");
                },
                leadingZero: true
            });

        });
    </script>
</head>
<body>
    <div id="container">
        <p id="time" class="time">
        </p>
        <p id="time2" class="time">
        </p>
    </div>
</body>
</html>
